<template>
  <div class="couponList">
    <div v-for="item in couponList" :key="item.id" class="item">
      <p>
        <span id="word">¥</span>
        <span id="discount">{{ item.discount + '元' }}</span>
        <span id="name">{{ item.name }}</span>
      </p>
      <p>
        {{ item.desc }}-{{ item.tag + ':' }}{{ '有效期' + item.days + '天' }}
      </p>
    </div>
  </div>
</template>

<script setup>
defineProps(['couponList'])
</script>

<style scoped>
.couponList {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  /* border: 1px solid #000; */
}
.item {
  width: 90%;
  margin: 5px 0;
  border: 1px solid #ff0000;
}
p {
  padding: 0 20px;
}
#word {
  font-size: 15px;
  color: #ff0000;
}
#discount {
  font-size: 25px;
  color: #ff0000;
  margin-right: 20px;
}
</style>
